﻿<%@ Page Language="C#" Inherits="alilive.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
	<title>Default</title>
    <script type="text/javascript" src="Scripts/jquery.js"></script>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="Scripts/bootstrap.min.css" >
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="Scripts/bootstrap.min.js" ></script>
            
    <script type="text/javascript">
        var liveFlag = true;
        
        $(document).ready(function(){ 
            $("#errorMsg").text("");
            console.log("begin load");
            $.ajax({
                type: "POST",
                url: "/Video/GetLiveUrl",
                data: "",
                success: function (sesponseTest) {
                    if("" == sesponseTest){
                        $("#errorMsg").text("直播地址不存在，请在配置页面添加！");
                    }else{
                        play(sesponseTest);
                    }
                }
            });
        }); 
            
        function changeToLive(){
            $("#vodListSelect").attr("disabled",true);
            $("#livButton").attr("disabled",true);
            
            $("#vodButton").attr("disabled",false);
            $("#videotape").attr("disabled",false);
            $("#pauseTape").attr("disabled",false);
            $("#changeUrl").attr("disabled",false);
        }
            
        function changeToVod(){
            $("#vodButton").attr("disabled",true);
            $("#livButton").attr("disabled",false);
            $("#vodListSelect").attr("disabled",false);
            $("#videotape").attr("disabled",true);
            $("#pauseTape").attr("disabled",true);
            $("#changeUrl").attr("disabled",true);
        }
            
        function selectVodToPlay(){
            console.log($("#vodListSelect").val());
            
        }
            
        function changeThePlayUrl(){
            var playPath = $("#livePlayUrl").val();
            if(playPath){
                play(playPath);
                $("#exampleModal").modal('hide');
                return;
            }
            $("#errorMsg").text("未添加摄像头，未修改播放地址！");
        }
    </script>
</head>
<body>
    <div class="prism-player" id="player-con"></div>
	<form id="form1" runat="server">
        <!-- 录播相关 -->
        <button id="livButton" class="btn btn-default" type="button" disabled="disabled" onclick="changeToLive()" >直播</button>
        <select id="vodListSelect" onchange="selectVodToPlay" disabled="disabled">
          <option value ="volvo">Volvo</option>
          <option value ="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
        </select>
            
        <!-- 直播相关 -->
        <button id="vodButton" type="button" class="btn btn-default" onclick="changeToVod()" >录播</button>
        <button id="videotape" class="btn btn-default" type="button" onclick="videoTape()" >录像</button>
        <button id="pauseTape" class="btn btn-default" type="button" onclick="pauseTape()" >暂停录制</button>
        <button id="changeUrl" class="btn btn-default" type="button" data-toggle="modal" data-target="#exampleModal" onclick="showAddLiveModel()" >添加摄像头</button>
        
            
        <span id="errorMsg"></span>
            
        <!-- config modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">添加摄像头</h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">直播地址:</label>
                    <input type="text" class="form-control" id="livePlayUrl" />
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="changeThePlayUrl()">确定</button>
              </div>
            </div>
          </div>
        </div>
	</form>
    <script>
        function play(playPath){
            var player = new Aliplayer({
              "id": "player-con",
              "source": playPath,
              "width": "100%",
              "height": "500px",
              "autoplay": true,
              "isLive": true,
    <!--          "cover": "cover.jpg",-->
              "rePlay": false,
              "playsinline": true,
              "preload": true,
              "controlBarVisibility": "hover",
              "useH5Prism": true
            }, function (player) {
                    console.log("The player is created");
                }
            );
        }
        
    </script>
</body>
</html>
